<template>
	<view class="wrapper set">
		<!--菜单-->
		<view class="set-list">
			<view class="set-item main-flex user" @click="goUrl('/pages/mine/info')">
				<view class="user-header">
					<u-avatar
						size="56"
						mode="aspectFill"
						bg-color="#f5f5f5"
						default-url="/static/images/icon/avatar.png"
						:src="imgUrl(userStore?.user?.heardImg)"></u-avatar>
				</view>
				<view class="main-flex-item user-info">
					<view class="user-name">{{userStore?.user?.name}}</view>
					<view class="user-phone">{{phoneText(userStore?.user?.phone)}}</view>
				</view>
				<view class="set-item-right">
					<uni-icons type="right" size="20" color="#333"></uni-icons>
				</view>
			</view>
			<view class="set-item main-flex" @click="goUrl('/pages/address/list')">
				<view class="set-item-name main-flex-item">地址管理</view>
				<view class="set-item-right">
					<uni-icons type="right" size="20" color="#333"></uni-icons>
				</view>
			</view>
		</view>
		<view class="set-list">
			<view class="set-item main-flex" @click="goWeb(1)">
				<view class="set-item-name main-flex-item">服务协议</view>
				<view class="set-item-right">
					<uni-icons type="right" size="20" color="#333"></uni-icons>
				</view>
			</view>
			<view class="set-item main-flex" @click="goWeb(2)">
				<view class="set-item-name main-flex-item">隐私政策</view>
				<view class="set-item-right">
					<uni-icons type="right" size="20" color="#333"></uni-icons>
				</view>
			</view>
			<view class="set-item main-flex" @click="goUrl('/pages/about/about')">
				<view class="set-item-name main-flex-item">关于我们</view>
				<view class="set-item-right">
					<uni-icons type="right" size="20" color="#333"></uni-icons>
				</view>
			</view>
			<view class="set-item main-flex" @click="openVersion">
				<view class="set-item-name main-flex-item">版本信息</view>
				<view class="set-item-text">{{version ? `V${version}` : ''}}</view>
				<view class="set-item-right">
					<uni-icons type="right" size="20" color="#333"></uni-icons>
				</view>
			</view>
			<view class="set-item main-flex" @click="goUrl('/pages/mine/code')">
				<view class="set-item-name main-flex-item">推广码</view>
				<view class="set-item-right">
					<uni-icons type="right" size="20" color="#333"></uni-icons>
				</view>
			</view>
		</view>
		<!--#ifndef MP-WEIXIN-->
		<button class="ty-button ty-button-confirm set-submit" @click="submit">退出</button>
		<!--#endif-->
		
		<uni-popup ref="popupVersion" type="dialog">
		  <uni-popup-dialog
				type="info"
				:showClose="false" 
				confirmText="我知道了"
		    title="版本信息"
		  	@confirm="dialogVersionConfirm">
				<view class="version">
					<view class="version-item" @click="clickVersion">版本号：V {{version}}</view>
					<view class="version-item">官网：{{gwUrl}}</view>
				</view>
		  </uni-popup-dialog>
		</uni-popup>
		
	</view>
</template>

<script setup>
import { computed, ref, watch, watchEffect } from 'vue';
import { onReady, onLoad, onReachBottom, onShow, onHide } from '@dcloudio/uni-app';
import useUserStore from '@/store/modules/user'
import useSetStore from '@/store/modules/set'
import { phoneText } from '@/utils/ty'
import { gwUrl } from '@/utils/config'
import modal from '@/plugins/modal'

	const userStore = useUserStore()
	const setStore = useSetStore()
	// 页面跳转
	const goUrl = (url) => {
		uni.navigateTo({
			url
		})
	}
	const goWeb = (type) => {
		uni.navigateTo({
			url: `/pages/web/web?type=${type}`
		})
	}
	const isSubmit = ref(false)
	const submit = () => {
		uni.showModal({
			title: '退出',
			content: '确认退出当前账号?',
			success: function (res) {
				if (res.confirm) {
					isSubmit.value = true
					userStore.logOut().then(res => {
						uni.$u.toast('退出成功')
						isSubmit.value = false
						uni.$u.sleep(1000).then(() => {
							uni.reLaunch({
								url: '/pages/login/login'
							})
						})
					}).catch(err => {
						isSubmit.value = false
					})
				}
			}
		})
	}
	
	// 查看版本信息
	let count = 0
	const version = ref(uni.getSystemInfoSync()?.appVersion || '')
	const popupVersion = ref(null)
	const openVersion = () => {
		popupVersion.value.open()
	}
	const dialogVersionConfirm = () => {
		popupVersion.value.close()
		count = 0
	}
	const	clickVersion = () => {
		count ++ 
		if (count > 5) {
			uni.navigateTo({
				url: '/pages/login/login'
			})
		}
	}
	onLoad((options) => {
	})
	
</script>

<style lang="scss">
	.set {
		padding: 20rpx;
		&-list {
			background-color: #ffffff;
			border-radius: 20rpx;
			padding: 0 20rpx;
			&+.set-list {
				margin-top: 20rpx;
			}
		}
		&-item {
			min-height: 96rpx;
			padding: 20rpx 0;
			box-sizing: border-box;
			&+.set-item {
				border-top: 1px solid $line-color;
			}
			&-name {
				font-size: 28rpx;
			}
			&-text {
				font-size: 28rpx;
			}
			.user {
				&-info {
					padding-left: 20rpx;
				}
				&-name {
					font-weight: 600;
					font-size: 28rpx;
				}
				&-phone {
					font-size: 26rpx;
					color: $text-light;
					margin-top: 10rpx;
				}
			}
		}
		&-submit {
			height: $button-height;
			background-color: $primary-color;
			padding: 0;
			margin: 0;
			margin-top: 40rpx;
			font-size: 32rpx;
			color: #ffffff;
			justify-content: center;
		}
	}
</style>
